<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加试题</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plug-in.min.js"></script>
    <style>
        html, body {
            overflow: hidden;
            background: #14191C;
            margin: 0;
        }

        .all{
            position: absolute;
            z-index: 777;
        }
        .examleft{
            margin-top: 120px;
            border: solid 1px #3d3d3d;
            border-radius: 6%;
            font-size: 18px;
            color: #d1f5de;
            font-weight: bold;
            z-index: 888;
        }
        .listExam {
            margin-top: 20px;
            /*border: solid 2px;*/
            border-radius: 6%;
            font-size: 18px;
            color: #d1f5de;
            font-weight: bold;
        }

        .navbar-inverse input[type="text"] {
            background: #313131;
            border: none;
            color: #999; }

        .navbar-inverse .navbar-form {
            position: relative; }

        .navbar-form button[type="submit"] {
            background: #313131;
            border: none;
            color: #999;
            position: absolute;
            top: 28%;
            right: 8%; }

        @media (min-width: 768px) {
            .navbar-form button[type="submit"] {
                top: 15%; } }
        .item img {
            width: 100%; }

        .form-group input{
            background-color: rgba(15, 15, 15, 0.7);
            color: whitesmoke;
        }
        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
            width: 200px;
        }
        .fileinput-button input{
            font-size: 16px;
            color: whitesmoke;
        }
        .dropdown-menu{
            margin: 0;
            padding: 0;
            border: 1px solid #000;
            background: #2f2f2f;
            min-width: 100px;
            height: 55px;
        }
        .dropdown-menu>li{
            width: 100px;
            border-radius: 4px;
        }
        .dropdown-menu>li a{
            color: #9a9a98;
            width: 100px;
            border-radius: 4px;
        }
        .dropdown-menu>li a:hover{
            background: #000000;
            color: white;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top navtop">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse"
                    data-target="#response-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="backHome" class="">
                <!--<strong>BY一考通</strong>-->
                <img src="images/LOGO_03.png" alt="LOGO" width="100px" style="display: block;line-height:90px;">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="response-collapse">
            <ul class="nav navbar-nav ulDaoHang" id="nav">
                <li class="itemdisplay" style="display: none"><a href="toaddItem">添加试题</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="mockExam">模拟考试
                        <span class="caret">
                                </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="mockExam">科目一</a></li>
                        <li><a href="mockExam4">科目四</a></li>
                    </ul>
                </li>
                <li><a href="practice">随机练习</a></li>
                <li><a href="practice2">顺序练习</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="">针对练习
                        <span class="caret">
                                </span>
                    </a>
                    <ul class="dropdown-menu" role="menu" style="height:105px; ">
                        <li><a href="toForPractice?role=3">图片题</a></li>
                        <li><a href="toForPractice?role=2">文字题</a></li>
                        <li><a href="toForPractice?role=1">选择题</a></li>
                        <li><a href="toForPractice?role=0">判断题</a></li>
                    </ul>
                </li>
            </ul>
            <div class="profile navbar-right">
                <ul class="nav navbar-nav">
                    <li class="nowuser" style="display: none;"><a href="#" id="loginOut">退出当前用户:</a></li>
                    <li><a href="displayUser" class="usernamedisplay"></a></li>
                    <li class="displaylogin"><a href="#" data-toggle="modal"
                                                data-target="#login-modal">登录</a></li>
                    <li class="displaylogin"><a href="#" data-toggle="modal"
                                                data-target="#register-modal">注册</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<!--试题-->
<div class="all row container">
    <div class="col-md-8 col-sm-12 col-xs-12  examleft">
        <p></p>
        <button class="btn btn-warning" id="panduan">点击添加选择题</button>

        <form enctype="multipart/form-data" id="form1" method="post" action="/addItem" class="listExam form1">
            <div class="form-group col-md-4">
                <label for="coments">试题内容：
                    <textarea rows="4" required cols="30" style=" background-color: rgba(15, 15, 15, 0.7);color:whitesmoke;" name="coments" class="form-control" id="coments"></textarea></label>
            </div>
            <div class="form-group col-md-4">
                <label for="itemA">A选项：
                    <input type="text" required name="itemA" value="A:" class="form-control" id="itemA"></label>
            </div>
            <div class="form-group col-md-4">
                <label for="itemB">B选项：
                    <input type="text" required name="itemB" value="B:" class="form-control" id="itemB"></label>
            </div>
            <div class="form-group col-md-4 yin hidden">
                <label for="itemC">C选项：
                    <input type="text" name="itemC" value="C:" class="form-control" id="itemC"></label>
            </div>
            <div class="form-group yin col-md-4 hidden">
                <label for="itemD">D选项：
                    <input type="text" name="itemD" value="D:" class="form-control" id="itemD"></label>
            </div>
            <div class="form-group col-md-4">
                <label for="answer">答案：
                    <!--<input type="text" name="answer" class="form-control" id="answer">-->
                    <select id="answer" name="answer" class="btn answer" style="background-color: #14191C;font-size: 16px">
                        <option value ="">选择答案</option>
                        <option value ="对" id="dui">对</option>
                        <option value ="错" id="cuo">错</option>
                        <option value ="A" id="A" class="hidden">A</option>
                        <option value ="B" id="B" class="hidden">B</option>
                        <option value ="C" id="C" class="hidden">C</option>
                        <option value ="D" id="D" class="hidden">D</option>
                    </select>
                </label>
            </div>
            <div class="form-group col-md-4">
                 <span class="fileinput-button">
                    添加图片:</p>
                     <input type="file" id="img" name="img2">
                </span>
            </div>
            <div class="form-group col-md-4 hidden">
                <input type="text" id="type" name="type">
            </div>
            <p></p>
            <div class="form-group text-center ">

                <input type="submit" name="" id="addItem" class="btn btn-block" value="提交">
            </div>
        </form>
    </div>
</div>

</body>
<script src="js/beijing.js"></script>
<script>
    $(function () {
        var storage=window.localStorage;
        var result=true;

        //显示\隐藏题库
        itemdisplay();

        function itemdisplay() {
            if (storage.getItem("type") == 1) {
                $(".itemdisplay").fadeIn(2000);
            }
        }
        $("#panduan").on("click",function () {
            if(result){
                $(this).text("点击添加判断题");
                $(".yin").removeClass("hidden");
                $("#type").val(1);
                $("#dui").addClass("hidden");
                $("#cuo").addClass("hidden");
                $("#A").removeClass("hidden");
                $("#B").removeClass("hidden");
                $("#C").removeClass("hidden");
                $("#D").removeClass("hidden");
                result=false;
            }
           else {
                $(this).text("点击添加选择题");
                $("#dui").removeClass("hidden");
                $("#cuo").removeClass("hidden");
                $(".yin").addClass("hidden");
                $("#A").addClass("hidden");
                $("#B").addClass("hidden");
                $("#C").addClass("hidden");
                $("#D").addClass("hidden");
                $("#type").val(0);
                result=true;
            }
        })

        //登陆成功后隐藏登录注册按钮
        function displayuser() {
            a = $(".usernamedisplay").text();
            if (a != "") {
                /* $(".displaylogin").css('display', 'none');
                 $(".nowuser").css('display', 'block');*/
                $(".wrongItem").fadeIn(1000);
                $(".displaylogin").fadeOut(1000);
                $(".nowuser").fadeIn(2000);
            }
        }

        var storage = window.localStorage;
        //从localstorage获得用户信息
        $(".usernamedisplay").text(storage.getItem("username"));
        //刷新当前用户
        setInterval(function () {
            displayuser();
        }, 1000);
    })
</script>
</html>